<!-- 扩展检索 -->
<template>
  <div class="extend-search" v-loading="loading">
    <div class="">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="关键词">
          <el-input v-model="form.keyword" class="short"></el-input>
          <el-button class="btn addBtn" @click="isShowExtend"
            >添加扩展词</el-button
          >
          <el-button class="btn addBtn" @click="showExclude = true"
            >添加排除词</el-button
          >
        </el-form-item>
        <el-form-item label="扩展词" v-show="showExtend">
          <el-input v-model="form.extend"></el-input>
          <p class="tips">
            <span
              v-for="list in extendList"
              :key="list"
              @click="handleClick('extend', list)"
              >{{ list.replace(/"|'/g, "") }}</span
            >
          </p>
        </el-form-item>
        <el-form-item label="排除词" v-show="showExclude">
          <el-input v-model="form.exclude"></el-input>
          <!-- <p class="tips">
            <span
              v-for="list in excludeList"
              :key="list"
              @click="handleClick('exclude', list)"
              >{{ list }}</span
            >
          </p> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="s-con">
      <el-button class="btn" @click="translateAll" round>翻译</el-button>
      <el-button class="btn" @click="clear" round>清除</el-button>
      <el-button class="btn s-btn" @click="search" round>搜索</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  props: {
    ctNavID: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        keyword: "",
        extend: "",
        exclude: "",
      },
      extendList: [],
      showExtend: false,
      // excludeList: ["电容器", "超级电容器", "燃料电池"],
      showExclude: false,
    };
  },
  computed: {
    // ...mapState(["searchWord"]),
  },
  methods: {
    isShowExtend() {
      // if (this.showExtend) {
      //   return;
      // }
      if (this.form.keyword == "") {
        this.$message({
          type: "warning",
          message: "暂无关键词可扩展！",
          duration: 1000,
        });
        return;
      }
      this.loading = true;
      this.showExtend = true;
      // 根据关键词获取扩展词列表
      // this.$get(this.$Url.patent.termExtend, {
      //   keyword: this.form.keyword,
      // })
      //   .then((res) => {
      //     this.loading = false;
      //     let result = res.data || [];
      //     this.extendList = result;
      //   })
      //   .catch((err) => {
      //     this.loading = false;
      //   });
      this.$get(this.$Url.patent.aiTermExtend, {
        query: this.form.keyword,
      })
        .then((res) => {
          this.loading = false;
          let result = res.data || [];
          this.extendList = result;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    translateAll() {
      this.translate("keyword");
      if (this.showExtend) {
        this.translate("extend");
      }
      if (this.showExclude) {
        this.translate("exclude");
      }
    },
    translate(key) {
      if (this.form[key] == "") {
        return;
      }
      this.$get(this.$Url.translat.translateZh2en, {
        text: this.form[key],
      }).then((res) => {
        // console.log(res);
        let data = res.data;
        data = data.replace(/，/g, ",");
        let dataList = data.split(",");
        this.form[key] += `、${dataList.join("、")}`;
      });
    },
    clear() {
      this.showExtend = false;
      this.showExclude = false;
      this.form = {
        keyword: "",
        extend: "",
        exclude: "",
      };
    },
    handleClick(key, value) {
      this.form[key] += `${this.form[key] != "" ? "、" : ""}${value}`;
    },
    search() {
      if (this.form.keyword == "") {
        this.$message({
          type: "error",
          message: "检索不能为空！",
          duration: 1000,
        });
        return;
      }
      let sq = "";
      let kw = "";
      // console.log(this.form.keyword.split("、"), this.form.extend.split("、"));
      this.form.keyword.split("、").forEach((item, index) => {
        if (index == 0) {
          kw += `\"${item}\"`;
        } else {
          kw += ` or \"${item}\"`;
        }
      });
      this.form.extend.split("、").forEach((item) => {
        kw += ` or \"${item}\"`;
      });
      sq += `B/(${kw})`;
      // sq += `B/(${this.form.keyword.replace(
      //   /、/,
      //   " "
      // )} ${this.form.extend.replace(/、/, " ")})`;

      if (this.form.exclude != "") {
        let e = "";
        this.form.exclude.split("、").forEach((item, index) => {
          if (index == 0) {
            e += `\"${item}\"`;
          } else {
            e += ` or \"${item}\"`;
          }
        });
        if (e) {
          sq += ` not B/(${e})`;
        }
        // sq += ` not B/(${this.form.exclude.replace(/、/, " ")})`;
      }
      this.$store.commit("setSearchWord", sq);
    },
  },
};
</script>

<style lang="scss" scoped>
.extend-search {
  position: relative;
  width: 100%;
  height: auto;
  // background: url(../../../../../assets/img/PS/search-bg.jpg) no-repeat center
  //   center;
  background: #fff;
  background-size: cover;
  padding: 20px 40px 20px 0;
  border: 2px solid $mainColor !important;
  border-radius: 8px;

  .short {
    width: 70%;
  }
  .addBtn {
    margin-left: 30px;
  }
  .btn {
    font-size: 12px;
    padding: 8px 37px;
    color: $mainColor;
    border: 1px solid $mainColor;
  }
  .tips {
    span {
      color: $mainColor;
      text-decoration: underline;
      margin-right: 15px;
      cursor: pointer;
    }
  }

  .s-con {
    text-align: right;
    .s-btn {
      background-color: $mainColor;
      color: #fff;
      font-weight: bold;
      border: 1px solid $mainColor;
    }
  }
}
</style>
